/*
 * @Date: 2024-03-19 14:47:31
 * @LastEditors: 陈俊宇 467724386@qq.com
 * @LastEditTime: 2024-08-13 18:43:16
 */
// 设定基础设计分辨率和对应的rem基准值
const designWidth = 1920
const baseFontSizeForDesign = 100

// 设定缩放因子的阈值和目标缩放因子
const screenWidthThreshold = 1500
const scaleFactorThreshold = 1.2 // 目标缩放因子为0.8

// 获取当前窗口宽度
function getWindowWidth() {
    return window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
}

// 设置html元素的font-size，并在屏幕宽度小于1920且大于1500时适当放大
function setRemUnit() {
    console.log('设置html元素的font-size')
    const actualWidth = getWindowWidth()
    let scaleFactor = 1

    // 如果屏幕宽度小于1800且大于1500，适当放大缩放因子
    if (actualWidth < 1800 && actualWidth > screenWidthThreshold) {
        scaleFactor =
            scaleFactorThreshold +
            ((designWidth - actualWidth) / (designWidth - screenWidthThreshold)) *
                (1 - scaleFactorThreshold)
    }

    const fontSize = actualWidth * (baseFontSizeForDesign / designWidth) * scaleFactor

    document.documentElement.style.fontSize = `${fontSize}px`
}

// 监听窗口大小变化事件以实时调整rem
window.addEventListener('resize', setRemUnit)

// 页面加载时初始化rem设置
setRemUnit()
